import React, {Component} from 'react';
import {View, Text, Image, Navigator, Block} from '@tarojs/components';
import Taro from '@tarojs/taro';
import Float from '../../../../../../components/float/float';
import {TARO_ENV} from "../../../../../../constants/api";
import {platform} from "../../../../../../utils/platform-settting.service";
import './index.scss';

interface IProps {
  data?: any
  customClass?: any
  pkeys?: any
  isUser?: any
  itemsNoPaddingLR?: any
  isReduceBottom?: any
  isMinHeight?: any
}

export default class Category extends Component<IProps> {

  getUrl = (url) => {
    const curProps: any = this.props
    let scene = curProps.scene
    const fromWhere = curProps.fromWhere
    let link = ''
    if (TARO_ENV === 'h5') {
      // link = window.location.origin // 导致页面重载(逻辑原意可能是: 不同商品间的"购买须知/图文介绍"展示不对)
      if (!!fromWhere && fromWhere.indexOf("search") > -1) {
        // 手动保存浏览状态(数据&位置)
        /*Taro.setStorageSync("fromWhere", fromWhere);
        Taro.setStorageSync("categoryList", JSON.stringify(this.props.data));*/
      }
    }
    link += url
    if (this.props.pkeys) {
      link += '&pkeys=' + this.props.pkeys
    }
    if (scene) {
      if (scene) {
        platform.scene = 0
        scene = scene.split('_')
        if (scene[0]) {
          link += '&sellerId=' + scene[0]
        }
        if (scene[1]) {
          link += '&bindSellerId=' + scene[1]
        }
        if (scene[2]) {
          link += '&tempSellerId=' + scene[2]
        }
      }
      const uInfo = Taro.getStorageSync('user') || ''
      if (uInfo && uInfo.mpkey && uInfo.mpkey !== 'undefined') {
        link += '&mpkey=' + uInfo.mpkey
      }
    }
    return link
  }

  // render discount label
  renderDiscountLabel(item) {
    const dataColor = Taro.getStorageSync('colorData');
    let domDiscount = null;

    if (!!item.is_activity) {
      domDiscount = (
        <Block>
          <Text className='discount category-discount'
            style={`background-color: ${dataColor.priceColor};`}
          >拼团价</Text>
        </Block>
      )
    } else {
      // 优先展示退款标签(仅蝌蚪)
      if (process.env.P_ENV === 'kd' && item.refund_sign) {
        const refund_signArr = item.refund_sign.split(",");
        domDiscount = (
          <Block>
            <Text className='refund-sign category-refund-sign'><Text
              className='font-family-price'
            >{refund_signArr[0]}</Text></Text>
          </Block>
        );
      } else {
        if (!!item.discount) {
          domDiscount = (
            <Block>
              <Text className='discount category-discount'
                style={`background-color: ${dataColor.priceColor};`}
              ><Text
                className='font-family-price'
              >{item.discount}</Text>折</Text>
            </Block>
          )
        }
      }
    }

    return domDiscount;
  }

  // 右侧同样展示
  renderRefundSignOfRight = (item) => {
    const dataColor = Taro.getStorageSync('colorData');
    let domRefundSign = null;
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if (refund_signArr.length > 0) {
      domRefundSign = refund_signArr.map(sign => (
        !!sign &&
        <Text className='category-label'
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return domRefundSign;
  }

  handleClick = () => {
    if (TARO_ENV !== 'h5') return;
    const {handlePageScroll} = this.props;
    !!handlePageScroll && (typeof handlePageScroll === "function") && handlePageScroll();
  }

  render() {
    const {data, isUser, itemsNoPaddingLR, isReduceBottom, isMinHeight, customClass} = this.props;
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <View
        className={`category ${customClass} ${isReduceBottom && TARO_ENV === 'weapp' && 'isReduceBottom'} ${isMinHeight && 'isMinHeight'}`}
      >
        {
          data && data.map(item => (
            <Navigator key={item.id} className='scroll-item' url={this.getUrl(item.url)}>
              <View className={`items ${itemsNoPaddingLR === 'true' && 'itemsNoPaddingLR'}`} onClick={this.handleClick}>
                <View className='items-left'>
                  <Image mode='aspectFill' className='img' src={item.main_img || item.img} />
                  {!((process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.is_free_visit && item.is_free_visit == 1) &&
                    <Block>
                      {this.renderDiscountLabel(item)}
                    </Block>}
                </View>
                <View className='items-right'>
                  <View className='right-top'>
                    <View className='pro-name'>{item.name}</View>
                    {!!item.sub_title && <View className='sub-title'>
                      {item.sub_title}
                    </View>}
                    {
                      ((item.serviceLabels && item.serviceLabels.length > 0) || item.refund_sign) &&
                      <View className='category-labels'>
                        {item.serviceLabels && item.serviceLabels.length > 0 && item.serviceLabels.map((items, index) =>
                          <Text key={index} className='category-label'
                            style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                          >{items.name}</Text>)}
                        {
                          process.env.P_ENV === 'kd' && item.refund_sign &&
                          this.renderRefundSignOfRight(item)
                        }
                      </View>
                    }
                    {!!item.salesVolume && !!platform.info.is_show_sales_volume &&
                      <View className='salesVolume'>销量：{item.salesVolume}笔</View>}
                  </View>
                  <View className='end-flex'>
                    {(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.is_free_visit && item.is_free_visit == 1 ?
                      <View className='right-price'>
                        <View className='price' style='visibility: hidden;' />
                        <View className='snapped-up'>免费入园</View>
                      </View> :
                      <View className='right-price'>
                        <View className='price'>
                          {
                            item.is_vip_price === 1 && !item.price ?
                              <View className='true-price font-family-price'>
                                <Text className='font-family-price symbol'>￥</Text>
                                <Float value={item.price || 0} />
                              </View>
                              :
                              !!item.price &&
                              <View className='true-price font-family-price'>
                                <Text className='font-family-price symbol'>￥</Text>
                                <Float value={item.price} />
                              </View>
                          }
                          {
                            item.is_vip_price === 1 &&
                            <Text style={{color: "#ff3e01", fontSize: "12px", padding: "0 3px"}}>会员享</Text>
                          }
                          {(item.is_vip_price === 1 && !item.price || !!item.price) && !!item.market_price &&
                            <View className='price-right font-family-price'>￥{item.market_price || 0}</View>}
                        </View>
                        {(!process.env.DISTINGUISH_IDENTITY || isUser || !item.commission) &&
                          <View
                            className='snapped-up'
                          >{(!item.price || !item.market_price) ? "去看看" : item.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                        {process.env.DISTINGUISH_IDENTITY && !isUser && !!item.commission && <View className='share-earn'>
                          <View className='share-left'>分享赚</View>
                          <View className='share-earn-price price'>
                            <Text>￥</Text>
                            <View className='true-price-share font-family-price'>
                              <Float value={item.commission || 0} />
                            </View>
                          </View>
                        </View>}
                      </View>}
                  </View>
                </View>
              </View>
            </Navigator>
          ))
        }
      </View>
    )
  }
}
